<template>
    <div>
       <p>更新时间：{{ updateTime }}</p>
       <p>{{ warning }}</p>
       <!-- <div ref="hid" class="one" v-for="(i, index) in warnings" :key="index"> -->
        <div ref="hid" class="one" >
            <div class="two">
                <p class="two-p-1">{{ warnings.sender }}</p>
                <p class="two-p-2">等级：{{ warnings.level }}</p>
                <p class="two-p-3">类型：{{ warnings.typeName }}</p>
            </div>
            <div class="three">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warnings.text }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import { key, api_Warning } from '../common/constrant.js'

    export default{
        data(){
            return{
                updateTime: "",
                warning: '',
                warnings: [],
            }
        },

        mounted(){
            this.getData()
        },

        computed:{
            location:function(){
                return this.$store.state.location
            }
        },

        methods:{
            // 获取数据
            getData(){
                var hid = this.$refs.hid
                this.loc = Number(this.location.lon).toFixed(2) + "," + Number(this.location.lat).toFixed(2)
                axios.get(api_Warning,{
                    params:{
                        key: key,
                        location: this.loc
                    }
                }).then((res) => {
                  console.log(res.data)
                  this.warnings = []
                  this.updateTime = res.data.updateTime
                  if(res.data.warning.length == 0){
                    this.warning = "当前城市无预警"
                    hid.style.display = 'none';
                  }
                  else
                  {
                    this.warnings = res.data.warning[0]
                    hid.style.display = 'block';
                  }
                })
                
            },
            
        },

        watch:{
            location:function(){
                this.getData()
            }
        }
    }
</script>

<style>
    .one{
        width: 40rem;
        height: 30rem;
        /* background-color: aqua; */
        margin: 0 auto;
    }
    .two{
        height: 5rem;
        width: 100%;
        /* background-color: bisque; */
    }
    .two-p-1{
        font-size: 30px;
        height: 13px;
    }
    .two-p-2{
        text-align: left;
        font-size: 20px;
        height: 10px;
        float: left;
        margin: 0 3rem 0 12rem;
    }
    .two-p-3{
        text-align: left;
        font-size: 20px;
    }
    .three>p{
        font-size: 18px;
        text-align: left;
    }
</style>